<template>
  <div>
    <el-date-picker
      class="anvil-code-date-range"
      v-model="dateValue"
      type="daterange"
      :disabled="disabled"
      :format="showFormat"
      :value-format="valueFormatStr"
      :start-placeholder="startPlaceholder"
      :end-placeholder="endPlaceholder"
      style="width: 100%"
      @change="
        (v) => {
          change(v);
        }
      "
      @focus="
        (e) => {
          focus(e);
        }
      "
      @blur="
        (e) => {
          blur(e);
        }
      "
    >
    </el-date-picker>
  </div>
</template>
<script>
export default {
  name: 'DateRange',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: Boolean,
      default: false
    },
    valueFormatStr: {
      type: String,
      default: ''
    },
    showFormat: {
      type: String,
      default: ''
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    change: {
      type: Function,
      default: () => {}
    },
    focus: {
      type: Function,
      default: () => {}
    },
    blur: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dateValue: []
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.dateValue = newVal;
      },
      immediate: true
    },
    dateValue: {
      handler(newVal) {
        if (newVal) {
          this.$emit('update:modelValue', newVal);
        } else {
          this.dateValue = [];
        }
      },
      deep: true
    }
  }
};
</script>
